﻿<!DOCTYPE html>
<html>
<head>
    <title>操作样式</title>
    <script src="./js/jquery-3.6.0.min.js" type="text/javascript"></script>
    <style type="text/css">
        .baseClass{background-color:#DDD;}
        .focuscClass{background-color:#FFF;border:2px dotted #FF0000;}
        .inverseColor{color: #FFF;background-color: #000;}
    </style>
</head>
<body>
    <img src="./img/aa.jpg" width="300px" height="500px"/><hr/>
    <input type="button" value="放大图片" onclick="enlargeImage()"/>
    <input type="button" value="缩小图片" onclick="lessenImage()"/>
    <script type="text/javascript">
    function enlargeImage(){
        $("img").css({
            width:function(index,value){
                return parseFloat(value)*1.1;},
            height:function(index,value){
                return parseFloat(value)*1.1;},
        });
    }
    function lessenImage(){
        $("img").css({
            width:function(index,value){
                return parseFloat(value)*0.9;},
            height:function(index,value){
                return parseFloat(value)*0.9;},
        });
    }
    </script>
</body>    
</html>